<template>
  <view class="page mt-24">
    <view class="frame" v-if="productData.length">
      <view class="horizontalFrame flex justify-between">
        <view
          class="tips flex align-center"
          v-for="(el, index) in dataList"
          @click="changPick(el)"
          :key="index"
        >
          <view class="txt" :class="el.active ? 'col-black' : ''">{{
            el.value
          }}</view>
          <image
            src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/seesawes.png"
            mode="scaleToFill"
            v-if="el.special"
            class="img"
          />
        </view>
      </view>
    </view>
    <!-- 瀑布流 -->
    <view class="masonry" v-if="productData.length">
      <view class="leftPart">
        <view v-for="(item, id) in productData" :key="id">
          <productCard v-if="showCard(id)" :items="item"></productCard></view
      ></view>
      <view class="rightPart">
        <view v-for="(item, id) in productData" :key="id">
          <productCard v-if="id % 2 === 0" :items="item"></productCard
        ></view>
      </view>
    </view>
    <emptyPage
      :mTop="'1%'"
      v-else
      title="暂无商品"
      :locate="true"
      :imgSrc="'https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/piteras.png'"
    ></emptyPage>
    <view class="footer flex justify-center align-center">
      <view v-if="!hasMore && productData.length !== 0" class="no-more">{{
        loadTitle
      }}</view>
    </view>
  </view>
</template>

<script>
// import { getSearchListData } from "@/api/product.js";
import emptyPage from "@/components/emptyPage.vue";
import productCard from "./productCard.vue";
export default {
  computed: {
    showCard() {
      return (id) => {
        let str = false;
        if (
          this.productData.length % 2 === 0 &&
          id === this.productData.length - 1
        ) {
          str = true;
        } else if (id % 2 !== 0) {
          str = true;
        }
        return str;
      };
    },
  },
  components: {
    emptyPage,
    productCard,
    // Loading,
  },
  props: {
    tyepId: {
      type: Number | String,
      defult: 0,
    },
    mark: {
      type: String,
      defult: "",
    },
  },
  data() {
    return {
      dataList: [
        { value: "综合", active: true, special: false },
        { value: "销量", active: false, special: true },
        { value: "上新", active: false, special: false },
      ],
      productData: [
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner9.png",
          title: "免费试看网格系统全配置视频3分钟",
          belong: "商业全案设计提升班",
          studyNum: "57",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner9.png",
          title: "免费试看网格系统全配置视频3分钟",
          belong: "商业全案设计提升班",
          studyNum: "57",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner9.png",
          title: "免费试看网格系统全配置视频3分钟",
          belong: "商业全案设计提升班",
          studyNum: "57",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner9.png",
          title: "免费试看网格系统全配置视频3分钟",
          belong: "商业全案设计提升班",
          studyNum: "57",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner9.png",
          title: "免费试看网格系统全配置视频3分钟",
          belong: "商业全案设计提升班",
          studyNum: "57",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner9.png",
          title: "免费试看网格系统全配置视频3分钟",
          belong: "商业全案设计提升班",
          studyNum: "57",
        },
      ], // 商品列表
      page: 1, // 当前页码
      limit: 10, // 每页条数
      order: 1, // 1代表升序、2代表倒序
      hasMore: true, // 是否还有更多数据
      loadTitle: "没有更多数据了",
      initStatus: false,
      standbyId: 0, // 判断点击Id是否一致
    };
  },
  onLoad(options) {},
  // 触底加载
  mounted() {
    if (!this.mark || this.mark === "1") {
      this.loadData();
    }
  },
  onShow() {},
  // 滚动监听
  onPageScroll(e) {},
  methods: {
    loadData() {
      if (!this.initStatus) {
        // 第一次进入页面跑
        this.productList();
        this.standbyId = this.tyepId ? this.tyepId : this.standbyId;
      }
      if (!this.hasMore && this.initStatus) return; // 如果没有更多数据，直接返回
      // 加载更多数据
      if (this.initStatus) {
        // 后续滚动或者切换类型
        uni.showToast({
          title: "加载中...", // 提示内容
          icon: "loading", // 图标类型，可选值：'success'、'loading'、'none'
          duration: 300, // 提示持续时间，单位毫秒
          mask: true, // 是否显示透明蒙层
        });
        setTimeout(() => {
          this.productList();
        }, 300);
      }
    },
    changPick(data) {
      // 导航选择
      if (data.special) {
        let list = this.productData.sort((a, b) => {
          if (this.order === 1) return Number(a.price) - Number(b.price);
          else return Number(b.price) - Number(a.price);
        });
        this.order = this.order === 1 ? 2 : 1;
        this.productData = JSON.parse(JSON.stringify(list));
      }
      this.dataList.forEach((item) => {
        if (item.value === data.value) item.active = true;
        else item.active = false;
      });
    },
    productList(value) {
      if (value) {
        // 如果value有值就是跑点击类型按钮
        if (this.standbyId !== value) {
          this.page = 1; // this.standbyId为前一次点击的ID， value为本次点击的ID
          this.hasMore = true; // value有数据就是正面是点击事件的
          this.initStatus = false;
        } else return; // 如果是通过点击事件过来this.standbyId和value相同就正面是点击重复类型按钮
      }
      let data = {
        // 参数
        page: this.page, // 当前页码
        limit: this.limit, //每页条数
        type: 1, // 普通商品
        categoryId: value ? value : this.tyepId, // 类型ID
        isShow: 1,
      };
      // getSearchListData(data)
      //   .then((res) => {
      //     if (value) {
      //       // 这个value有数据正面已经点击类型按钮
      //       if (this.standbyId !== value) {
      //         // 正面是点击其他类型按钮、需要清空回复原始数据
      //         this.productData = [];
      //         this.page = 1;
      //       }
      //     }
      //     this.productData = this.productData.concat(res.data.list); // 滚动添加之前的数据
      //     this.page++; // 页码加 1
      //     if (this.initStatus || res.data.list.length < 10) {
      //       // 标记是否点击类型是和当前的类型一致、 initStatus第一次进来
      //       if (res.data.list.length < 10) {
      //         this.hasMore = false;
      //       }
      //       // 模拟加载完成
      //       setTimeout(() => {
      //         uni.hideToast(); // 隐藏 Toast
      //       }, 300);
      //     }
      //     this.initStatus = true;
      //     this.standbyId = value ? value : this.tyepId;
      //   })
      //   .catch((err) => {
      //     this.hasMore = false;
      //     // that.$util.Tips({
      //     //   title: err,
      //     // });
      //   });
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.col-black {
  color: #000 !important;
}
.mt-29 {
  margin-top: 29.65rpx;
}
.frame {
  margin: 26.16rpx 109rpx;
}
.horizontalFrame {
  .tips {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #8f8f91;
  }
  .img {
    width: 15.7rpx;
    height: 17.44rpx;
    margin-left: 3rpx;
  }
}
.masonryImg {
  width: 192rpx;
  height: 113rpx;
}
.no-more {
  font-size: 28rpx;
}
.masonry {
  // column-count: 2; /* 分成 3 列 */
  // column-gap: 20rpx; /* 列间距 */
  margin: 3rpx 0rpx !important;
  display: flex;
  justify-content: space-between;
}
.leftPart,
.rightPart {
  column-count: 1; /* 分成 3 列 */
  width: 350.58rpx;
}
.footer {
  padding-bottom: 30rpx;
}
.leftPart,
.rightPart {
  column-count: 1; /* 分成 3 列 */
  width: 336rpx;
}
.title {
  margin-top: 22rpx;
  margin-left: 28rpx;
  font-weight: 600;
  font-size: 32rpx;
  color: #212225;
}
.studyNum {
  font-size: 24px;
  color: #c3c3c3;
  margin-top: 4rpx;
  margin-left: 28rpx;
}
</style>
